<template>
	<view>
		<!-- 状态栏 -->
		<uni-status-bar bgcolor="#FFE933"></uni-status-bar>
		<!-- 背景图 -->
		<view class="top">
			<image src="../../static/demo/loginhead.png" mode="widthFix" lazy-load></image>
			<view class="icon iconfont icon-guanbi" @tap="back"></view>
		</view>

		<view class="longin-beat">
			<!-- 账号密码登录 -->
			<template v-if="!status">
				<input class="uni-input common-input" v-model="username" type="text" placeholder="昵称/手机号/邮箱" />
				<view class="login-input-box">
					<input class="uni-input common-input forget-input" v-model="password" type="text" placeholder="请输入新密码" />
					<view class="forget u-f-ajc">忘记密码?</view>
				</view>
			</template>
			<!-- 手机号码登录 -->
			<template v-else>
				<view class="login-input-box">
					<view class="phone u-f-ajc">+86</view>
					<input class="uni-input common-input phone-input" v-model="phone" type="text" placeholder="输入手机号码" />
				</view>
				<view class="login-input-box">
					<input class="uni-input common-input forget-input" v-model="checknum" type="text" placeholder="请输入验证码" />
					<view class="huoqu " @tap="getCheckNum">
						<view class="u-f-ajc">{{!codetime?'获取验证码':codetime+'s后重获取'}}</view>
					</view>
				</view>
			</template>

			<button type="primary" :loading="loading" class="user-set-btn" :class="{'user-set-btn-disable':disable}" @tap="submit"
			 :disabled="disable">登录</button>
		</view>
		<!-- 登录状态切换 -->
		<view class="login-status  u-f-ajc login-padding " @tap="changeStatus">
			{{status?'账号密码登录':'验证码登录'}}
			<view class="icon iconfont icon-jinru login-font-color"></view>
		</view>
		<!-- 第三方登录 -->
		<view class="other-login-title u-f-ajc login-padding login-font-color">
			第三方登录
		</view>
		<other-login class="login-three"></other-login>
		<!-- 协议 -->
		<view class="login-rule u-f-ajc login-padding login-font-color">
			注册代表您同意<view>《百科用户协议》</view>
		</view>
	</view>
</template>

<script>
	import uniStatusBar from "../../components/uni-status-bar/uni-status-bar.vue"
	import otherLogin from "../../components/home/other-login.vue"
	export default {
		components: {
			uniStatusBar,
			otherLogin
		},
		data() {
			return {
				disable: true,
				loading: false,
				status: false, //false 代表账号密码 true手机号码
				username: "",
				password: "",
				phone: "",
				checknum: "",
				codetime: 0,
			}
		},
		watch: {
			username(val) {
				this.change()
			},
			password(val) {
				this.change()
			},
			phone(val) {
				this.change()
			},
			checknum(val) {
				this.change()
			}
		},
		methods: {
			// 初始化表单
			initinput() {
				this.username = '';
				this.password = '';
				this.phone = '';
				this.checknum = '';
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 监听输入框
			change() {
				if ((this.username && this.password) || (this.phone && this.checknum)) {
					this.disable = false;
					return;
				}
				this.disable = true;
			},
			// 登录
			submit() {
				// 账号密码
				if (!this.status) {
					return;
				}
				// 验证码登录
				if (!this.isphone()) {
					uni.showToast({
						title: '请输入正确的手机号！',
						icon:"none"
					});
					return;
				}
				console.log("登录")
			},
			// 切换登录状态
			changeStatus() {
				this.status = !this.status;
				this.initinput();
			},
			// 验证手机号码
			isphone(){
				let mPattern = /^1[34578]\d{9}$/; 
				return mPattern.test(this.phone);
			},
			// 获取验证码
			getCheckNum() {
				if (this.codetime > 0) {
					return;
				}
				// 验证手机号合法性
				if (!this.isphone()) {
					uni.showToast({
						title: '请输入正确的手机号！',
						icon:"none"
					});
					return;
				}
				
				// 请求服务器，发送验证码
				// 发送成功，开启倒计时
				this.codetime = 30;
				let timer = setInterval(() => {
					this.codetime--;
					if (this.codetime < 1) {
						clearInterval(timer);
						this.codetime = 0;
					}
				}, 1000);
			},



		}
	}
</script>

<style>
	.login-padding {
		padding: 20upx 0;
	}

	.login-font-color {
		color: #CCCCCC;
	}

	.login-three {
		margin-left: 8%;
	}

	.top {
		width: 100%;
		position: relative;
	}

	.top>image {
		width: 100%;
	}

	.top>view {
		position: fixed;
		top: 30upx;
		left: 30upx;
		font-size: 40upx;
		font-weight: bold;
		color: #332F0A;
	}

	.login-input-box {
		position: relative;
	}

	.forget-input {
		padding-right: 180upx;
	}

	.forget {
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		width: 150upx;
		z-index: 100;
	}

	.phone {
		position: absolute;
		bottom: 0;
		left: 20upx;
		height: 100%;
		font-weight: 600;
	}

	.phone-input {
		padding-left: 90upx;
	}

	.huoqu>view {
		position: absolute;
		top: 0;
		right: 0;
		height: 80%;
		width: 150upx;
		margin-top: 6upx;
		padding: 0 4upx;
		z-index: 100;
		font-size: 25upx;
		background: #EEEEEE;
		border-radius: 10upx;
		color: #909090;
	}

	.login-rule>view {
		color: #007AFF;
	}

	.other-login-title {
		position: relative;
	}

	.other-login-title:before,
	.other-login-title:after {
		content: "";
		position: absolute;
		background: #CCCCCC;
		height: 1upx;
		width: 100upx;
		top: 50%;
	}

	.other-login-title:before {
		left: 25%;
	}

	.other-login-title:after {
		right: 25%;
	}
</style>
